﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Shimba Bootstrap 4 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
    <meta content="Beethemesdesign" name="author" />

    <!-- favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.png">


    <!-- Required css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <!-- Begin page -->
    <div class="wrapper">

        <!-- ============================================================= -->
        <!-- ===============    side menu content start  ================= -->
        <!-- ============================================================= -->
        <div class="left-side-menu">
            <div class="slimscroll-menu">
                <!-------------------------------------->
                <!-- Put your logo hear in img tag -->
                <a href="index.html" class="logo">
                    <span class="logo-lg">
                        <img src="assets/images/logo.png" alt="">
                    </span>
                    <span class="logo-sm">
                        <img src="assets/images/logo_sm.png" alt="">
                    </span>
                </a>
                <!-- Logo content end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- User details start -->
                <div class="sidenav-user">
                    <h4 class="mb-1 mt-0">Cindy Deitch</h4>
                    <p class="mb-2">UI/UX Designer</p>
                    <img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle">
                </div>
                <!-- User details end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- Menu link start -->
                <ul class="metismenu side-nav">
                    <li class="menu-caption menu-item">Navigation</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-home"></i>
                            <span> Dashboards </span>
                            <span class="badge badge-success badge-pill float-right mr-3">New</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="dashboard-project.html">Project</a></li>
                            <li><a href="dashboard-sales.html">Sales</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-command"></i>
                            <span class="badge badge-danger badge-pill float-right mr-3">100+</span>
                            <span> Widgets </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="widgets-simple.html">Statistics</a></li>
                            <li><a href="widgets-data.html">Data</a></li>
                            <li><a href="widgets-chart.html">Chart</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">UI Components</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-box"></i>
                            <span> Bootstrap </span>
                            <span class="badge badge-primary-lighten badge-pill float-right mr-3">b4+</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="ui-alert.html">Alert</a></li>
                            <li><a href="ui-badge.html">Badge</a></li>
                            <li><a href="ui-breadcumb.html">Breadcumb</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-cards.html">Cards</a></li>
                            <li><a href="ui-collapse.html">Collapsed</a></li>
                            <li><a href="ui-dropdown.html">Dropdown</a></li>
                            <li><a href="ui-modals.html">Modals</a></li>
                            <li><a href="ui-pagination.html">Pagination</a></li>
                            <li><a href="ui-progress.html">Progress</a></li>
                            <li><a href="ui-spinners.html">Spinners</a></li>
                            <li><a href="ui-tabs.html">Tabs</a></li>
                            <li><a href="ui-toast.html">Toast</a></li>
                            <li><a href="ui-tooltip-popover.html">Tooltip & Popover</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-layers"></i>
                            <span> Advance UI Kit </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="aui-alerts.html">Alert</a></li>
                            <li><a href="aui-calendar.html">Calendar</a></li>
                            <li><a href="aui-dragula.html">Dragula</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="dripicons-document"></i>
                            <span> Forms </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="form-elements.html">Basic Elements</a></li>
                            <li><a href="form-advanced.html">Form Advanced</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-fileuploads.html">File Uploads</a></li>
                            <li class="menu-item">
                                <a href="javascript: void(0);" aria-expanded="false">Editors<span class="menu-sub-icon"></span></a>
                                <ul class="menu-level-third" aria-expanded="false">
                                    <li><a href="form-editors-summernote.html">Summernote</a></li>
                                    <li><a href="form-editors-simplemde.html">Simplemde</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-feather"></i>
                            <span> Icons </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="icons-drip.html">Drip</a></li>
                            <li><a href="icons-feather.html">Feather</a></li>
                            <li><a href="icons-ion.html">Ion</a></li>
                            <li><a href="icon-linear.html">Linear</a></li>
                            <li><a href="icons-material.html">Material</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Charts & Maps</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-pie-chart"></i>
                            <span> Charts </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="charts-apex.html">Apex</a></li>
                            <li><a href="charts-chartjs.html">Chartjs</a></li>
                            <li><a href="charts-knob.html">Knob</a></li>
                            <li><a href="charts-morris.html">Morris</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-map"></i>
                            <span> Maps </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="maps-google.html">Google Maps</a></li>
                            <li><a href="maps-vector.html">Vector Maps</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Tables</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-list"></i>
                            <span> Tables </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="tables-basic.html">Bootstrap Tables</a></li>
                            <li><a href="tables-datatable.html">Data Tables</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Pages</li>
                    <li class="menu-item">
                        <a href="pages-starter.html" class="menu-link">
                            <i class="feather icon-monitor"></i>
                            <span> Sample Page </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-profile.html" class="menu-link">
                            <i class="feather icon-user"></i>
                            <span> User Profile </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-invoice.html" class="menu-link">
                            <i class="feather icon-printer"></i>
                            <span> Invoice </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-faq.html" class="menu-link">
                            <i class="feather icon-help-circle"></i>
                            <span> FAQ </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-wifi-off"></i>
                            <span> Maintenance </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="pages-404.html">Error 404</a></li>
                            <li><a href="pages-maintenance.html">Maintenance</a></li>
                            <li><a href="pages-comming-soon.html">Comming soon</a></li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-lock"></i>
                            <span> Authentication </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="pages-login.html">Login</a></li>
                            <li><a href="pages-login-2.html">Login 2</a></li>
                            <li><a href="pages-login-img.html">Login 3</a></li>
                            <li><a href="pages-register.html">Register</a></li>
                            <li><a href="pages-register-2.html">Register 2</a></li>
                            <li><a href="pages-register-img.html">Register 3</a></li>
                            <li><a href="pages-logout.html">Logout</a></li>
                            <li><a href="pages-logout-2.html">Logout 2</a></li>
                            <li><a href="pages-logout-img.html">Logout 3</a></li>
                            <li><a href="pages-recoverpw.html">Recover Password</a></li>
                            <li><a href="pages-recoverpw-2.html">Recover Password 2</a></li>
                            <li><a href="pages-recoverpw-img.html">Recover Password 3</a></li>
                            <li><a href="pages-lock-screen.html">Lock Screen</a></li>
                            <li><a href="pages-lock-screen-2.html">Lock Screen 2</a></li>
                            <li><a href="pages-lock-screen-img.html">Lock Screen 3</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="apps-tasks.html" class="menu-link">
                            <i class="feather icon-clipboard"></i>
                            <span> Tasks </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="icon feather icon-gitlab"></i>
                            <span> Projects </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="apps-projects-list.html">List</a></li>
                            <li><a href="apps-projects-details.html">Details</a></li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="dripicons-browser"></i>
                            <span> Layouts </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="layouts-horizontal.html">Horizontal</a></li>
                            <li><a href="layouts-light-sidenav.html">Light Sidenav</a></li>
                            <li><a href="layouts-dark.html">layouts dark</a></li>
                            <li><a href="layouts-collapsed.html">Collapsed Sidenav</a></li>
                            <li><a href="layouts-boxed-vertical.html">Boxed Vertical</a></li>
                            <li><a href="layouts-boxed-horizontal.html">Boxed Horizontal</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- Menu link end -->
                <!-------------------------------------->

                <div class="clearfix"></div>
            </div>
        </div>
        <!-- ============================================================= -->
        <!-- ===============     side menu content End   ================= -->
        <!-- ============================================================= -->


        <!-- ============================================================== -->
        <!-- Start Page Content here -->
        <!-- ============================================================== -->

        <div class="content-page">
            <div class="content">

                <!-- ============================================================= -->
                <!-- ===============    Top bar header content start  ================= -->
                <!-- ============================================================= -->
                <div class="navbar-custom">
                    <!------------------------------------->
                    <!-- right side topbar content start -->
                    <ul class="list-unstyled topbar-right-menu float-right mb-0">
                        <li class="dropdown notification-list topbar-dropdown">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-mail noti-icon"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-map-pin text-muted"></i> &nbsp; Loction</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-upload-cloud text-muted"></i> &nbsp; Upload File</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-activity text-muted"></i> &nbsp; Report</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-life-buoy text-muted"></i> &nbsp; Support</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-github text-muted"></i> &nbsp; Github</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-slack text-muted"></i> &nbsp; Slack</a>
                            </div>
                        </li>

                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-bell noti-icon"></i>
                                <span class="noti-icon-badge"></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
                                <div class="dropdown-item noti-title">
                                    <h5 class="m-0">
                                        <span class="float-right">
                                            <a href="javascript: void(0);" class="text-dark">
                                                <small>Clear All</small>
                                            </a>
                                        </span>Notification <span class="badge badge-danger badge-pill">5 new</span>
                                    </h5>
                                </div>
                                <div class="slimscroll" style="max-height: 230px;">
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">New order has been received.
                                            <small class="text-muted">1 min ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-account-plus"></i>
                                        </div>
                                        <p class="notify-details">Membership application has been added.
                                            <small class="text-muted">5 hours ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Cristina Pride</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>New report file has been uploaded.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">Database sever #2 has been fully restarted.
                                            <small class="text-muted">4 days ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Karen Robinson</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>Membership application has been added.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-heart"></i>
                                        </div>
                                        <p class="notify-details">Herry liked
                                            <b>Admin </b>
                                            <small class="text-muted">13 days ago</small>
                                        </p>
                                    </a>
                                </div>
                                <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
                                    View All
                                </a>
                            </div>
                        </li>
                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle nav-user arrow-none mx-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <span class="account-user-avatar">
                                    <img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
                                </span>
                                <span>
                                    <span class="account-user-name">Rang Avdhut</span>
                                </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-user text-muted"></i> &nbsp; My profile</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-mail text-muted"></i> &nbsp; Messages</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-settings text-muted"></i> &nbsp; settings</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-power text-danger"></i> &nbsp; Log Out</a>
                            </div>
                        </li>
                    </ul>
                    <!-- right side topbar content end -->
                    <!------------------------------------->

                    <!---------------------------------------------->
                    <!-- Left side topbar content Start -->

                    <!-- Minimenu and mobille toggle button start -->
                    <button class="button-menu-mobile open-left">
                        <i class="feather icon-menu"></i>
                    </button>
                    <!-- Minimenu and mobille toggle button end -->


                    <div class="header-search">
                        <form>
                            <div class="input-group">
                                <span class="feather icon-search"></span>
                                <input type="text" class="form-control" placeholder="Search...">
                            </div>
                        </form>
                    </div>
                    <!-- Left side topbar content end -->
                    <!------------------------------------->
                </div>
                <!-- ================================================================== -->
                <!-- ===============    Top bar header content end  ================= -->
                <!-- ================================================================== -->


                <!-- Start Content-->
                <div class="container-fluid">

                    <!-- start page title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item active">Widgets</li>
                                        <li class="breadcrumb-item active">Charts</li>
                                    </ol>
                                </div>
                                <h4 class="page-title">Charts</h4>
                            </div>
                        </div>
                    </div>
                    <!-- end page title -->

                    <!-- chart starts -->
                    <div class="row">
                        <!-- widget start -->
                        <div class="col-xl-3 col-md-6 ">
                            <div class="card ui-advance-card mt-4">
                                <div class="card-body">
                                    <div class="bg-primary goto-top">
                                        <div class="card-body text-white pb-0">
                                            <div id="static-chart-1"></div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between mt-3">
                                        <div class="">
                                            <h3 class="m-0">45,965</h3>
                                            <p class="text-muted mb-0">Users</p>
                                        </div>
                                        <i class="feather icon-users display-4 text-primary"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6 ">
                            <div class="card ui-advance-card mt-4">
                                <div class="card-body">
                                    <div class="bg-success goto-top">
                                        <div class="card-body text-white pb-0">
                                            <div id="static-chart-2"></div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between mt-3">
                                        <div class="">
                                            <h3 class="m-0">59,785</h3>
                                            <div class="text-muted">Invoices</div>
                                        </div>
                                        <i class="feather icon-printer display-4 text-success"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6 ">
                            <div class="card ui-advance-card mt-4">
                                <div class="card-body">
                                    <div class="bg-warning goto-top">
                                        <div class="card-body text-white pb-0">
                                            <div id="static-chart-3"></div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between mt-3">
                                        <div class="">
                                            <h3 class="m-0">125+</h3>
                                            <div class="text-muted">Article</div>
                                        </div>
                                        <i class="feather icon-book display-4 text-warning"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6 ">
                            <div class="card ui-advance-card mt-4">
                                <div class="card-body">
                                    <div class="bg-danger goto-top">
                                        <div class="card-body text-white pb-0">
                                            <div id="static-chart-4"></div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between mt-3">
                                        <div class="">
                                            <h3 class="m-0">95,458</h3>
                                            <div class="text-muted">Story</div>
                                        </div>
                                        <i class="feather icon-slack display-4 text-danger"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- widget End -->

                        <!-- widget start -->
                        <div class="col-md-6 col-xl-3">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">Todays Income</h4>
                                    <div class="d-flex justify-content-between">
                                        <p class="text-muted text-small">Monthly Income</p>
                                        <p class="text-muted text-small">$45,987</p>
                                    </div>
                                    <div id="ecomm-chart-1"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">Total Revenue</h4>
                                    <div class="d-flex justify-content-between">
                                        <p class="text-muted text-small">Avg in this month</p>
                                        <p class="text-muted text-small">$9749</p>
                                    </div>
                                    <div id="ecomm-chart-2"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">Pending Product</h4>
                                    <div class="d-flex justify-content-between">
                                        <p class="text-muted text-small">return</p>
                                        <p class="text-muted text-small">45</p>
                                    </div>
                                    <div id="ecomm-chart-3"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">Sales</h4>
                                    <div class="d-flex justify-content-between">
                                        <p class="text-muted text-small">Last Turnover</p>
                                        <p class="text-muted text-small">$45,936</p>
                                    </div>
                                    <div id="ecomm-chart-4"></div>
                                </div>
                            </div>
                        </div>
                        <!-- widget end -->

                        <!-- widget start -->
                        <div class="col-lg-4">
                            <div class="card overflow-hidden">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <h5 class="m-0">Overall</h5>
                                        <div class="card-header-elements ml-auto">
                                            <div class="btn-group dropdown">
                                                <button type="button" class="btn btn-sm btn-default icon-btn borderless btn-round md-btn-flat dropdown-toggle hide-arrow" data-toggle="dropdown"><i class="ion ion-ios-more"></i></button>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-refresh-cw text-muted"></i> &nbsp; Reload</a>
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <h2 class="mb-sm-3">231,590</h2>
                                    <h5 class="mb-4">Total revenue</h5>
                                    <div class="d-lg-flex d-none mb-4">
                                        <div class="text-warning  mr-4">
                                            <h4 class="mb-2">+40%</h4> Growth
                                        </div>
                                        <div class="text-danger  mr-4">
                                            <h4 class="mb-2">2.5%</h4> Refund
                                        </div>
                                        <div class="text-primary  mr-4">
                                            <h4 class="mb-2">+23.6%</h4> Online
                                        </div>
                                    </div>
                                    <p class="mt-3 mb-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                                        galley of
                                        type and scrambled it to make a type specimen book.</p>
                                </div>
                                <div id="overall-chart" class="w-100"></div>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="row">
                                <div class="col-sm-4 grid-margin stretch-card">
                                    <div class="card overflow-hidden">
                                        <div class="card-body">
                                            <div class="d-flex flex-wrap justify-content-between">
                                                <h5 class="card-title">Detailed Reports</h5>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <h2 class="m-0">13,956</h2>
                                                <p class="text-danger ml-2 m-0">+2.21%</p>
                                            </div>
                                            <p class="text-muted m-0 text-small">Total users world wide</p>
                                        </div>
                                        <div id="del-reports" style="height:100px"></div>
                                    </div>
                                </div>
                                <div class="col-sm-8 grid-margin stretch-card">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex flex-wrap justify-content-between">
                                                <h5 class="card-title">Users</h5>
                                            </div>
                                            <p class="text-muted mb-2">Sale information on advertising, exhibitions, market research, online media, customer desires, PR and much </p>
                                            <div class="row">
                                                <div class="col text-center">
                                                    <div id="circleProgress1"></div>
                                                    <div>
                                                        <span class="text-small text-danger">Offline</span>
                                                        <h3 class="mb-0">33,960</h3>
                                                    </div>
                                                </div>
                                                <div class="col text-center">
                                                    <div id="circleProgress2"></div>
                                                    <div>
                                                        <span class="text-small text-success">Online</span>
                                                        <h3 class="mb-0">23,193</h3>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 grid-margin stretch-card">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex flex-wrap justify-content-between">
                                                <h5 class="card-title">Statitics</h5>
                                            </div>
                                            <h2 class="text-dark">87659</h2>
                                            <p class="font-weight-light text-muted mb-2 text-small">Last 6 months sales</p>
                                            <div id="barChartStacked"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 grid-margin stretch-card">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex flex-wrap justify-content-between">
                                                <h5 class="card-title pb-md-3">Product categories</h5>
                                            </div>
                                            <div id="productCategory"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- widget End -->

                        <!-- widget start -->
                        <div class="col-xl-3 col-md-6 ">
                            <div class="card overflow-hidden">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <h5 class="m-0">Tasks</h5>
                                        <div class="card-header-elements ml-auto">
                                            <div class="btn-group dropdown">
                                                <button type="button" class="btn btn-sm btn-default icon-btn borderless btn-round md-btn-flat dropdown-toggle hide-arrow" data-toggle="dropdown"><i class="ion ion-ios-more"></i></button>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-refresh-cw text-muted"></i> &nbsp; Reload</a>
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center my-2">
                                        <div id="project-chart-1"></div>
                                        <span class="text-muted">Due Tasks</span>
                                    </div>
                                    <span class="text-muted mr-1">Completed:</span>
                                    <span class="text-dark">348</span>
                                </div>
                                <div class="progress mt-0 mb-0 progress-sm">
                                    <div class="progress-bar bg-primary" role="progressbar" style="width: 75%; " aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6 ">
                            <div class="card overflow-hidden">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <h5 class="m-0">Overdue</h5>
                                        <div class="card-header-elements ml-auto">
                                            <div class="btn-group dropdown">
                                                <button type="button" class="btn btn-sm btn-default icon-btn borderless btn-round md-btn-flat dropdown-toggle hide-arrow" data-toggle="dropdown"><i class="ion ion-ios-more"></i></button>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-refresh-cw text-muted"></i> &nbsp; Reload</a>
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center my-2">
                                        <div id="project-chart-2"></div>
                                        <span class="text-muted">Tasks</span>
                                    </div>
                                    <span class="text-muted mr-1">Yesterday's overdue:</span>
                                    <span class="text-dark">48</span>
                                </div>
                                <div class="progress mt-0 mb-0 progress-sm">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 72%; " aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6">
                            <div class="card overflow-hidden">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <h5 class="m-0">Issues</h5>
                                        <div class="card-header-elements ml-auto">
                                            <div class="btn-group dropdown">
                                                <button type="button" class="btn btn-sm btn-default icon-btn borderless btn-round md-btn-flat dropdown-toggle hide-arrow" data-toggle="dropdown"><i class="ion ion-ios-more"></i></button>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-refresh-cw text-muted"></i> &nbsp; Reload</a>
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center my-2">
                                        <div id="project-chart-3"></div>
                                        <span class="text-muted">Open</span>
                                    </div>
                                    <span class="text-muted mr-1">Closed today:</span>
                                    <span class="text-dark">168</span>
                                </div>
                                <div class="progress mt-0 mb-0 progress-sm">
                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 55%; " aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6">
                            <div class="card overflow-hidden">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <h5 class="m-0">Features</h5>
                                        <div class="card-header-elements ml-auto">
                                            <div class="btn-group dropdown">
                                                <button type="button" class="btn btn-sm btn-default icon-btn borderless btn-round md-btn-flat dropdown-toggle hide-arrow" data-toggle="dropdown"><i class="ion ion-ios-more"></i></button>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-refresh-cw text-muted"></i> &nbsp; Reload</a>
                                                    <a href="javascript:" class="dropdown-item"><i class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center my-2">
                                        <div id="project-chart-4"></div>
                                        <span class="text-muted">Proposals</span>
                                    </div>
                                    <span class="text-muted mr-1">Implemented:</span>
                                    <span class="text-dark">589</span>
                                </div>
                                <div class="progress mt-0 mb-0 progress-sm">
                                    <div class="progress-bar bg-danger" role="progressbar" style="width: 95%; " aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                        <!-- widget End -->
                    </div>
                    <!-- chart end -->

                    <div class="div">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="card sale-card">
                                    <div class="card-header">
                                        <h5>Tickets</h5>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Date</th>
                                                        <th>Projects</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex">
                                                                <div class="mr-3">
                                                                    <div class="ui-demo-avatar text-white bg-primary">
                                                                        AL
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    Alta Lucas
                                                                    <div class="text-muted">Connecticut</div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            31 Aug 2018
                                                            <div class="text-muted">9:30 am</div>
                                                        </td>
                                                        <td>
                                                            6770 Verner Burgs
                                                            <div class="text-muted">View on map</div>
                                                        </td>
                                                        <td>
                                                            <div class="dropdown dropleft">
                                                                <button class="btn p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    <i class="mdi mdi-dots-horizontal card-menu-btn"></i>
                                                                </button>
                                                                <div class="dropdown-menu" data-x-placement="left-start">
                                                                    <a class="dropdown-item" href="#!"><i class="mdi mdi-grease-pencil mr-2"></i>Edit</a>
                                                                    <a class="dropdown-item" href="#!"><i class="mdi mdi-delete mr-2"></i>Delete</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex">
                                                                <div class="mr-3">
                                                                    <div class="ui-demo-avatar text-white bg-success">
                                                                        TS
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    Teresa Shaw
                                                                    <div class="text-muted">Florida</div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            13 May 2018
                                                            <div class="text-muted">10:30 am</div>
                                                        </td>
                                                        <td>
                                                            1300 Gideon Divide Apt. 400
                                                            <div class="text-muted">Start session</div>
                                                        </td>
                                                        <td>
                                                            <div class="dropdown dropleft">
                                                                <button class="btn p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    <i class="mdi mdi-dots-horizontal card-menu-btn"></i>
                                                                </button>
                                                                <div class="dropdown-menu" data-x-placement="left-start">
                                                                    <a class="dropdown-item" href="#!"><i class="mdi mdi-grease-pencil mr-2"></i>Edit</a>
                                                                    <a class="dropdown-item" href="#!"><i class="mdi mdi-delete mr-2"></i>Delete</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex">
                                                                <div class="mr-3">
                                                                    <div class="ui-demo-avatar text-white bg-danger">
                                                                        RU
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    Rosa Underwood
                                                                    <div class="text-muted">North Dakota</div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            02 Jan 2018
                                                            <div class="text-muted">11:00 am</div>
                                                        </td>
                                                        <td>
                                                            9576 Rempel Extension
                                                            <div class="text-muted">End session</div>
                                                        </td>
                                                        <td>
                                                            <div class="dropdown dropleft">
                                                                <button class="btn p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    <i class="mdi mdi-dots-horizontal card-menu-btn"></i>
                                                                </button>
                                                                <div class="dropdown-menu" data-x-placement="left-start">
                                                                    <a class="dropdown-item" href="#!"><i class="mdi mdi-grease-pencil mr-2"></i>Edit</a>
                                                                    <a class="dropdown-item" href="#!"><i class="mdi mdi-delete mr-2"></i>Delete</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex">
                                                                <div class="mr-3">
                                                                    <div class="ui-demo-avatar text-white bg-warning">
                                                                        WA
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    Warren Arnold
                                                                    <div class="text-muted">North Dakota</div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            02 Jan 2018
                                                            <div class="text-muted">11:00 am</div>
                                                        </td>
                                                        <td>
                                                            9576 Rempel Extension
                                                            <div class="text-muted">End session</div>
                                                        </td>
                                                        <td>
                                                            <div class="dropdown dropleft">
                                                                <button class="btn p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    <i class="mdi mdi-dots-horizontal card-menu-btn"></i>
                                                                </button>
                                                                <div class="dropdown-menu" data-x-placement="left-start">
                                                                    <a class="dropdown-item" href="#!"><i class="mdi mdi-grease-pencil mr-2"></i>Edit</a>
                                                                    <a class="dropdown-item" href="#!"><i class="mdi mdi-delete mr-2"></i>Delete</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex flex-wrap justify-content-between">
                                            <h5 class="card-title">Revenue</h5>
                                        </div>
                                        <p class="text-muted mb-3">Sale information on advertising, exhibitions, market research, online media, customer desires, PR and much more</p>
                                        <div id="barChart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- container -->

            </div> <!-- content -->

            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->

            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            © Shimba - by Beethemesdesign
                        </div>
                        <div class="col-md-6">
                            <div class="text-md-right footer-links d-none d-md-block">
                                <a href="javascript: void(0);">Buy Now</a>
                                <a href="http://www.bootstrapmb.com/">Rate us</a>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->


        </div>

        <!-- ============================================================== -->
        <!-- End Page content -->
        <!-- ============================================================== -->


    </div>
    <!-- END wrapper -->





    <!-- Required js -->
    <script src="assets/js/app.js"></script>


    <!-- third party:js -->
    <script src="assets/js/vendor/apexcharts.min.js"></script>
    <!-- third party end -->

    <!-- demo:js -->
    <script src="assets/js/demo/demo.widgets.js"></script>
    <!-- demo end -->

</body>

</html>
